<template>
	<div class="login-container flx-center">
		<div class="login-box">
			<SwitchDark class="dark" />
			<div class="login-left">
				<img src="@/assets/images/login_left.png" alt="login" />
			</div>
			<div class="login-form">
				<div class="login-logo">
					<!-- <img class="login-icon" src="@/assets/images/logo.svg" alt="" /> -->
					<h2 class="logo-text">{{ title }}</h2>
				</div>
				<LoginForm @changetitle="change" v-if="title == '欢迎登录速邮达'" />
				<Register @changetitle="change" v-if="title == '欢迎注册成为速邮达会员'"></Register>
				<ForgetPassword @changetitle="change" v-if="title == '找回密码'"></ForgetPassword>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="login">
import { ref } from "vue";
import SwitchDark from "@/components/SwitchDark/index.vue";
import LoginForm from "./components/LoginForm.vue";
import Register from "./components/Register.vue";
import ForgetPassword from "./components/forgetPassword.vue";

const title = ref("欢迎登录速邮达");
const change = (msg: string) => {
	if (msg == "register") {
		title.value = "欢迎注册成为速邮达会员";
	} else if (msg == "fogetpassword") {
		title.value = "找回密码";
	} else if (msg == "login") {
		title.value = "欢迎登录速邮达";
	}
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
